<template>
  <div>
    <el-dialog
      title="账号批处理"
      :visible.sync="batch_operate_status"
      width="30%"
      :before-close="handleClose">
      <div>
        <span style="font-size:15px;font-weight: 800">编辑所选账号使用状态：</span>
        <span>
          <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </span>
        <span slot="footer" class="dialog-footer" style="margin-left: 20px">
          <el-button type="primary" @click="click_set">设 置</el-button>
        </span>

      </div>
      <p class="line"></p>
      <div style="margin-top: 30px">
        <span style="font-size:15px;font-weight: 800">点击批量下载所选的测试账号： </span>
        <span>
          <el-button type="primary" @click="click_download">Downland accounts</el-button>
        </span>
        <div style="margin: 10px;color: red">
          注意：点击批下载账号时会将下载的账号使用状态置为已使用！
        </div>
      </div>

    </el-dialog>
  </div>

</template>

<script>
import { download_url } from '@/api/account'

export default {
  name: 'DataBatchOperate',
  props:{
    down_uids: {
      type: Array
    },
    batch: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      batch_operate_status: this.batch,
      value: '',
      options: [{
        value: 'yes',
        label: '已使用'
      },
        {
          value: 'no',
          label: '未使用'
        }]
    }
  },
  watch: {
    batch(newval, oldval){
      // console.log('oldval=', oldval);
      this.batch_operate_status = newval;
    }
  },
  methods:{
    click_set(){
      console.log('批量设置所选的测试账号 flag=', this.value);
      this.$emit('batch_set', this.value);
    },

    click_download() {
      console.log('批量下载所选的账号');
      console.log('down_uids=', this.down_uids);
      let url = download_url(this.down_uids).then(res=>res)
      window.open(url)
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.batch_operate_status = false;
          this.$emit('batch_events');
        })
        .catch(_ => {});
    }
  }

}
</script>

<style scoped>
.line{
  width: 100%;
  height: 0;
  border-bottom: 1px dashed #000000;
}
</style>
